<template>
  <div>
    <!-- <div>{{title}} </div>
    <el-button @click="parentMsg='changeMessage by Parent'">changeMessage</el-button>
    <Child :parentData="parentMsg" @childEvent="handleSubmit" :title.sync='title'></Child> -->
    <Inject></Inject>
    <el-row>
      <el-button @click="changeMsg()">改变provide的值</el-button>
    </el-row>
  </div>
</template>
<script>
import Child from './child.vue'
import Inject from './inject.vue'
export default {
  components: { Child, Inject },
  // provide() {
  //   //重要一步，在父组件中注入一个变量或函数
  //   return {
  //     msg: '通过provide传递的信息',
  //     // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
  //   }
  // },
  provide: function () {
    return {
      nameFromParent: this.parentMsg,
      getParentName: () => this.parentMsg,
    }
  },
  data() {
    return {
      parentMsg: '我是父组件向子组件传递的值',
      title: '这是主页面',
    }
  },
  methods: {
    changeMsg() {
      this.parentMsg = 'provide数据已更新'
    },
    handleSubmit(childData) {
      this.parentMsg = childData
    },
  },
}
</script>
<style lang="scss" scoped>
</style>